<template>
  <div class="about">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="20" :md="16" :lg="14" :xl="12">
        <div class="about-container">
          <h1>{{ $t('about.title') }}</h1>
          <p>{{ $t('about.description') }}</p>
          
          <el-divider content-position="left">项目结构</el-divider>
          
          <el-collapse>
            <el-collapse-item title="路由配置" name="1">
              <div>
                <p>本项目使用Vue Router实现路由管理，主要特点：</p>
                <ul>
                  <li>采用history模式，提供更友好的URL</li>
                  <li>实现路由懒加载，优化首屏加载速度</li>
                  <li>配置路由守卫，实现权限控制和页面切换效果</li>
                </ul>
              </div>
            </el-collapse-item>
            
            <el-collapse-item title="状态管理" name="2">
              <div>
                <p>使用Vuex进行状态管理，特点：</p>
                <ul>
                  <li>模块化store结构，便于维护</li>
                  <li>集成vuex-persistedstate实现数据持久化</li>
                  <li>包含用户、应用、设置等核心模块</li>
                </ul>
              </div>
            </el-collapse-item>
            
            <el-collapse-item title="国际化" name="3">
              <div>
                <p>基于vue-i18n实现多语言支持：</p>
                <ul>
                  <li>支持中英文切换</li>
                  <li>与Element UI组件库国际化无缝集成</li>
                  <li>语言设置持久化保存</li>
                </ul>
              </div>
            </el-collapse-item>
            
            <el-collapse-item title="工具与服务" name="4">
              <div>
                <p>集成多种实用工具：</p>
                <ul>
                  <li>封装axios请求与拦截器</li>
                  <li>提供日期、金额等格式化工具</li>
                  <li>包含防抖、节流等常用函数</li>
                  <li>集成Element UI组件库</li>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
          
          <div class="action-buttons mt-10">
            <el-button type="primary" @click="$router.push('/')">{{ $t('home.title') }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style lang="scss" scoped>
.about {
  padding: 20px;
  
  .about-container {
    padding: 20px;
    
    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: $primary-color;
    }
    
    p {
      color: $text-color-regular;
      line-height: 1.6;
    }
    
    .el-collapse {
      margin: 20px 0;
    }
    
    .action-buttons {
      text-align: center;
      margin-top: 30px;
    }
  }
}
</style>
